<template>
<div>
  <p class="title">{{detail.courseTitle}}</p>
  <img :src="detail.coverPicture" alt="">
  <div class="detail-item" v-for="item of introList" :key="item.id">
    <div>{{item.introField}}</div>
    <van-divider />
    <div v-html="item.introFieldValue"></div>
  </div>
</div>
</template>

<script>
import { keDetail } from "@/api/kecheng";

export default {
  name: "kdetail",
  data() {
    return {
      introList:[],
      detail:{}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      const {introList,lxCourseDetail} = await keDetail(this.$route.query.id)
      console.log(introList,lxCourseDetail)
      this.introList = introList
      this.detail = lxCourseDetail
    }
  }
}
</script>

<style scoped>
.title{
  line-height: 50px;
  background-color: #e3e4e5;
  text-align: center;
}
.title+img{
  display: block;
  margin: 0 auto;
}
.detail-item{
  padding: 20px;
}
.detail-item :first-child{
  color: var(--theme);
  font-weight: bolder;
}
.detail-item :last-child{
  color:#495960;
}
</style>
